<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
        status-icon>
        <el-form-item label="最高学历" prop="education">
            <el-select class="w-full" v-model="ruleForm.education">
                <el-option label="专科" value="专科" />
                <el-option label="本科" value="本科" />
                <el-option label="研究生" value="研究生" />
                <el-option label="博士生" value="博士生" />
            </el-select>
        </el-form-item>
        <el-form-item label="毕业院校" prop="graduateSchool">
            <el-input v-model="ruleForm.graduateSchool" maxlength="50" />
        </el-form-item>
        <el-form-item label="专业" prop="major">
            <el-input v-model="ruleForm.major" maxlength="50" />
        </el-form-item>
        <el-form-item label="毕业证" prop="diplomaFileId">
            <ImageUpload v-model="ruleForm.diplomaFileUrl" @change="ruleForm.diplomaFileId = $event" />
        </el-form-item>
        <el-form-item label="在校证明(在校生需上传)" prop="schoolProve">
            <ImageUpload v-model="ruleForm.schoolProveUrl" @change="ruleForm.schoolProve = $event" />
        </el-form-item>
    </el-form>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
const formSize = ref('default')
const ruleFormRef = ref()
const props = defineProps({
    ruleForm: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const rules = reactive({
    education: [
        { required: true, message: '请选择最高学历', trigger: 'change' },
    ]
})
const submitForm = async (finish) => {
    if (!ruleFormRef.value) {
        finish(false)
        return
    }
    await ruleFormRef.value.validate((valid, fields) => {
        console.log(valid, fields)
        if (valid) {
            finish(true)
        } else {
            finish(false)
        }
    })
}
defineExpose({
    submitForm
})
</script>
<style lang="scss" scoped>
.demo-ruleForm {
    :deep(.el-form-item__label) {
        white-space: pre-wrap;
        text-align: right;
        height: auto;
        line-height: 20px;
        width: 150px !important;
    }

    :deep(.el-form-item) {
        margin-right: 0;
        // align-items: center;
        // margin-bottom: 0 !important;
    }
}
</style>